<template>
	<view class="content">
		<view class="header-box">
				<u-dropdown>
						<u-dropdown-item v-model="typeVal" title="收入类型"  @change="optionChange" :options="options"></u-dropdown-item>
				</u-dropdown>
		</view>
		<scroll-view scroll-y="true" style="height: 85vh;" @scrolltolower="scrolltolower">
			<view class="histry-list">
				<view class="histry-item" v-for="(item, index) in arr" :key="index">
					<view class="left-box">
						<view class="name">
							{{item.type_name}}
						</view>
						<view class="">
							时间：{{item.create_time_text}}
						</view>
					</view>
					<view class="price">
						+{{item.money}}
					</view>
				</view>
				<noMre v-if="!arr.length"></noMre>
			</view>
		</scroll-view>
			
	</view>
</template>

<script>
	import noMre from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				page: 1,
				arr: [],
				pageObj :{},
				typeVal : '',
				options: [
					// {
					// 	label: '默认排序',
					// 	value: 1,
					// },
					// {
					// 	label: '距离优先',
					// 	value: 2,
					// },
					// {
					// 	label: '价格优先',
					// 	value: 3,
					// }
				],
				arr:[ ],
			};
		},
		onShow() {
			
		},
		components:{
			noMre
		},
		onLoad({type}) {
			if(type){
				this.typeVal = type
				console.log(this.typeVal);
			}
			this.getType()
			this.getArr()
		},
		methods:{
			optionChange(){
				console.log(this.typeVal);
				this.getArr()
			},
			scrolltolower(){
					this.page++
					this.getArr()
			},
			getType(){
				this.myHttp({
					url:"/fenxiao/api/Team/accountTypeList",
				}).then((res)=>{
					this.options = res.data.list
				})
			},
			getArr(){
				this.myHttp({
					url:'/fenxiao/api/Team/accountList',
					data:{
						page_size: 10,
						page: this.page,
						type: this.typeVal,
					}
				}).then((res)=>{
					if(this.page==1){
						this.arr = []
					}
					this.arr = this.arr.concat(res.data.list)
				})
			},
		},
		watch:{
			// typeVal(){
			// 	this.getArr()
			// }
		}
	}
</script>

<style lang="scss">
	.content{
		background-color: #F2F2F2;
		height: 100vh;
		.header-box{
			// background-color: #EF903C;
			// height: 10vh;
			padding: 0upx 30upx;
			color: #FFFFFF;
			.dropdownBox{
				height: 10vh;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		.histry-list{
			@include flexCenter;
			flex-direction: column;
			.histry-item{ 
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30upx;
				border-bottom: 1upx solid #F9F9F9;
				width: 694rpx;
				height: 147rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 20rpx;
				.left-box{
					color: #828282;
					font-size: 24rpx;
					.name{
						font-size: 28rpx;
						color: #000000;
						margin-bottom: 24rpx;
					}
				}
				.price{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #EB0D17;
				}
			}
			
		}
	}
</style>
